<template>
    <div class="acknowledgment-page">
        <p>
            自《机动都市阿尔法》wiki上线以来，得到了许多玩家的帮助和支持，才得以让wiki逐渐丰富完善，特创建本页面以表感谢。<br>（排名不分先后，如有遗漏或错误，请及时与本人联系）
        </p>
        <div class="acknowledgment-list">
            <div class="account-type">
                <span class="circle pink-circle"></span><span style="margin-right: 10px;color: #fb7299;">B站账号</span>
                <span class="circle blue-circle" style="margin-left: 20px;"></span><span
                    style="color: blue;">游戏账号</span>
            </div>
            <div class="contributor" style="margin-top: 40px;">
                <a href="https://space.bilibili.com/29014773" class="pink link" style="font-weight: 800;">
                    怜银丝（uid：29014773）
                </a>
                <div class="contribution">提供背景设定栏目资料</div>
                <div class="contribution">提供驾驶员档案</div>
            </div>
            <div class="contributor">
                <a href="https://space.bilibili.com/624269237" class="pink link" style="font-weight: 800;">
                    -榴莲Durian-（uid：624269237）
                </a>
                <div class="contribution">提供驾驶员技能图标</div>
            </div>
            <div class="contributor">
                <a class="blue" style="font-weight: 800;">
                    ❤NULL😊零值❤（id：1511636305）
                </a>
                <div class="contribution">提供驾驶员栗子酱档案</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.pink {
    color: #fb7299;
}

.blue {
    color: blue;
}



.acknowledgment-page {
    font-family: 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    position: relative;
    width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    .acknowledgment-list {
        margin-top: 2.5rem;

        .account-type {
            margin-bottom: 0.5rem;
            font-weight: bold;

            .circle {
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 5px;
            }

            .pink-circle {
                background-color: #fb7299;
            }

            .blue-circle {
                background-color: blue;
            }
        }


        .contributor {
            margin-top: 2rem;

            .link {
                text-decoration: none;
                font-weight: bold;

                &:hover {
                    text-decoration: underline;
                }
            }

            .contribution {
                margin-left: 20px;
                line-height: 1.5;

            }

            a {
                text-decoration: none
            }

        }


    }


}
</style>